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The User 
Interface 


The User 
Interface (UI) 


¢ The portion of a Web page where users 
interact is called the user interface 


( ) Great technology never stops evolving. Successful techies never stop learning. 


¢ The layout of a user interface will Onelpes thor Oa 
dramatically impact a user experience 


¢ layouts can range from minimalist 
with just a few elements, to pages 
that are jammed full with content 


¢ Simple layouts and complex layouts Te Ga Gc Gaz © 
require different models to ensure that 
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content displays properly for users mac tenet tone = 


Vendor Prefixes 
* As with HTMLS, CSS3 is still 


in a draft format and might Internet -ms- 

not be compatible with all Explorer 

browsers Firefox =) (072 = 
¢ New properties are being added all the Opera -O- 


time, while others are being modified 
¢ Many browsers offer , 
alternative property names Safar 
to workaround any 
compatibility problems 
¢ These property names must 
be used in conjunction with a 
vendor prefix 


¢ Avendor prefix is simply a keyword that 
ic ciirrnrindqad hv dachac 


Chrome -webkit - 
-webkit- 


Vendor Prefixes in Action 


¢ To apply the flexbox style to elements in a browser, like 
Chrome, you simply add the -webkit-flexbox property to 
your CSS 


¢ A best practice is to include the property with all four vendor 
prefixes 
¢ This will increase the likelihood that your Web page will render correctly 


¢ If you have questions about whether your property will display 
properly, then check out caniuse.com 


The CSS 
Box Model 
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The CSS Box Model, pt. 1 


¢ The CSS Box model defines 
the rules for how content is 
formatted on a Web page or 
Web application 


¢ Each element of HTML is ina 
box that multiple 
components, including 
padding, border, and margin 


¢ Padding is the space between the 
content and its border 


¢ Border surrounds the box that content 
sits inside 
¢ A margin is the space that surrounds 


the box and sits between other boxes in 
a Web document 


Block-level and Inline Elements 
Within the CSS Box model, 


BLOCK LEVEL ELEMENT 
there are two categories of EXAMPLES 


elements ° phil 
¢ block-level 
¢ inline e <ul>, <ol>, <dl> 


e <hl> - <h6o> 
Block-level elements create + oS 


boxes that are a part of a pages INLINE ELEMENT EXAMPLES 


layout 


| | | | ¢ <img/> 
¢ this category includes articles, sections, e <a> 
paragraphs, headers, footers and more ne 
: e <strong> 
Inline elements are used to , Welds © 
format content ¢ <input> 


¢ this category includes emphasis and 
boldface 


Parent/Child Relationship 


With the CSS Box model, it is : Parent Box 
possible for a box to contain : 
one or more boxes 3 Child Box 
¢ The outer box is referred to as the parent . 
¢ An inner box is referred to as a child : 

¢ This is similar to nesting tags in HTML 


A child inherits CSS styles from 

a parent, which means that 

styles applied to a parent will — ; 7 
apply to a child as well ane ee Rede tA ah ee eeu ee Beas ee ee oe eee es eee eee ee ; 


¢ This isn’t the case for all CSS properties 


Problems with the CSS Box Model 


The CSS Box model is not without problems 


Some browsers will apply properties differently 


¢ For example, height and width are supposed to be separate attributes but sometimes 
aren’t treated as such by older browsers 


Fiexboxes 
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The CSS Flexbox Box Model 


¢ (CSS3 now includes the 
Flexbox Box model, a layout 
mode that provides flexibility 
when a user changes the size 
of their browser window 


¢ Elements, navigation bars, 
forms and pictures will resize 
and reposition automatically to 
fill available space 


¢ We use media queries to 
determine which device Is 
being used 


¢ CSS uses this information to 
automatically adjusts our HTML 
document to fit a screen 


Flexbox Items 


¢ An element is defined as a 
flexbox using the display 
property 

¢ The display property 
possesses two values: 
flexbox and inline- 
flexbox 


¢ the flexbox value sets the flexbox as a 
block-level element 


« the inline-flexbox value sets the 
flexbox as an inline-level element 


Flexbox Properties and Values, pt. 1 


Flexbox introduces nine other properties, each with their own set 
of unique values 


PROPERTY VALUE(S) DESCRIPTION 


flex pos-flex Makes child boxes flexible by height and width 
neg - flex 
preferred-size 
none 

flex-align Start Sets the default alignment for child boxes; if the 
end orientation of the parent box is horizontal, flex- 
center align determines the vertical alignment of the child 
baseline boxes and vice versa 


stretch 


Flexbox Properties and Values, pt. 2 


PROPERTY VALUE(S) DESCRIPTION 


flex- row Controls the direction of child boxes in the parent box; 
direction row- reverse also affects the flex-pack property 
column 
column - 
reverse 
flex- flow flex- Sets the flex-direction and flex-wrap properties at the 
direction same time 
flex-wrap 
flex-item- auto Overrides the default alignment of child boxes styled 
align Start with the flex-align property 
end 
cel vel 
baseline 


Stretch 


Flexbox Properties and Values, pt. 3 


flex- start Sets child box alignment within the parent box when extra 
Line-pack end Space exists 
center 
justify 
distribute 
stretch 
flex- number Assigns child boxes to groups and controls the order in 
order which they appear in a layout, beginning with the lowest 
numbered group 
flex-pack start Justifies the alignment of child boxes within a flexbox to 
end ensure all whitespace in the parent box ts filled 
Celivele 
flex-wrap nowrap Determines whether child boxes automatically create a new 
wrap line and wrap onto it or overflow the flexbox 
wrap- 


reverse 


Working with Flexboxes 


¢ Flexboxes can contain other 
boxes, or child boxes, which 
are referred to as flexbox 
items 

¢ With the flex property, you 
can make the flexbox items 
flexible as well 


* recall that the display property is used 
to make parent boxes flexible 


¢ The flex property can be cniiad Wocnia Wo chic 
used to proportionally scale 
flexbox items when the 


flexbox increases or 
decreases in size 


Changing the Direction of Child Items 
The flex-direction property allows 


developers to change the direction 
of child boxes in a flexbox eae amas aa 
* it uses the row, row- reverse, coLumn, 

and coLumn-reverse values 


The flex-wrap property determines 
if child boxes will wrap onto a new 


line when a window condenses 

* it uses the NOWrap, Wrd)P, and Wrdap- 
reverse values 

The flex-flow property sets the 

flex-direction and flex-wrap 

properties at the same time 


Flexbox Demo 


<style type="text/css"> 
#myFlexbox { 
display: -ms-flexbox; 
-ms-flex-direction: row | row-reverse | column | column-reverse; 
-ms-flex-wrap: wrap; 
background: gray; 
height: auto; 
} 
#childBlue { 
background: blue; 
height: 80px; 
width: 100px; 
} 
#childGreen { 
background: green; 
height: 80px; 
width: 100px; 
} 
</style> 


Ordering and Arranging Content 


¢ The flex-order property 
allows you to adjust the order 
and arrangement of contents 
inside of a flexbox 


¢ The property groups child 
boxes to control the order in 
which they appear in a layout 


¢ The default value for the flex- 


order property is 0 
Orange Apple Pear 


More About Flexboxes 


https://msdn.microsoft.com/en-us/library/Nh673531(v=vs.85). 
asox 


Grid Layouts 


Mae 


The Grid Layout Model 
¢ When the Flexbox Box model isn’t 
appropriate, you can use the Grid 


Layout model 


¢ The Grid Layout model uses CSS to | 


structure content using rows and ) 2] , : | : ; 
¢ Grids are extremely flexible and : V —- —— =z — — 
provide an easier to use option for 
organizing content than HTML — a ee ae Ls ae 
— 


Grid layouts and Grid Items 
¢ Grid layouts are very similar to 
tables because they feature rows 


and columns 


¢ They are best suited for more | | | 
complex layouts - like those : a. J ; 
required by newspapers - than | & |) column | “—m ~~ 
flexboxes can handle to Jo* | 

* The content in grid layouts are also 


modular, which allows you to move (==). ==== = = Se 


a er tte 
to another | | | | | | , 


Defining the Grid Layout 


Define a grid layout by using the display property, along with 


the grid or inline-grid values 


¢ Child elements in a grid are called grid items, which can be 
positioned according to grid tracks, grid lines, or grid cells 


LAYOUT CONCEPT DESCRIPTION 


Grid tracks 
Grid lines 


Grid cells 


The columns and rows of a grid 


The horizontal and vertical lines that 
Separate columns and rows 


The logical soace where content is 
placed 


Grid Properties and Values, pt. 1 


grid- Length Specifies parameters for one or more columns or rows in a 
columns percentage grid 
or fraction 
grid-rows max- 
content 
min- 
content 
minmax (min 
,max) 
auto 
grid- string+ Provides a visualization of the grid element’s structure and 
template none defines the grid cells 
grid-cell string Positions a child item inside a named grid cell 


none 


Grid Properties and Values, pt. 1 
PROPERTY —__[VALUE(S) 


grid-column [integer or string Places child items in a grid 
or Start] 
grid row [integer or string end] 

auto 
grid-column-span integer Defines the dimensions of a grid cell 
or by specifying the distance (in lines) 
grid-row-span from the string line to the ending 

line 

grid-column- none Creates additional columns or rows 
Sizing rows as needed to accommodate content 
or columns 
grid-row-sizing 
grid-column- start Controls a child item’s alignment 
align end within a cell 
or center 


grid-row-align stretch 


Grid Layout Demo 


<style> 
#gridded { 
display: -ms-grid; 
background: gray; 
-ms-grid-columns: 10px 250px 10px 250px 10px 250px 10px 250px 10px; 
-ms-grid-rows: lfr; 


} 
#iteml { 
background: orange; 
-ms-grid-row: 1; 
-ms-grid-column: 1; 
} 
#item2 { 
background: purple; 
-ms-grid-row: 2; 
-ms-grid-column: 2; 
} 


</style> 


More About Grid Layouts 
httpos://msdn.microsoft.com/en-us/library/hh6/73533(v=vs.85).asp 
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